<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="/css/index.css">
<style>
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 36px;
    }

    .el-tree {
        font-size: 100px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 36px;
    }
</style>
<body>
<!--根标签一定要存在，和Vue对象进行绑定-->
<div id="app">
    <el-button type="primary"  @click="refresh">刷新</el-button>
    <el-container>
        <el-aside width="200px">
            <!--左侧树形菜单-->
            <el-tree :data="data"
                     :props="defaultProps"
                     default-expand-all
                     @node-click="handleNodeClick">
            </el-tree>
        </el-aside>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜单名称">
                    <el-input v-model="form.label"></el-input>
                </el-form-item>
                <el-form-item label="父节点">
                    <!--设置一个有隐藏的父ID，用于传参-->
                    <input  type="hidden" name="form.parentId">
                    <el-input v-model="form.parentName" @focus="dialogMenuTreeVisible=true"></el-input>
                </el-form-item>
                <el-form-item label="请求地址">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{btnName}}</el-button>
                    <el-button type="danger" v-if="isShow" @click="onDel">删除</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>

    <el-dialog title="权限树" :visible.sync="dialogMenuTreeVisible">
        <el-tree :data="data"
                 :props="defaultProps"
                 show-checkbox
                 check-strictly="true"
                 ref="parentMenuTree"
                 default-expand-all
        ></el-tree>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="checkSelectNode">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>

<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>
    var app =new Vue({
        el:"#app",
        data:function () {
            return{
                form: {},//form表单对象
                data:[], //tree数据
                defaultProps: {//传参属性
                    children: 'children',
                    label: 'label'
                },
                btnName:'添加',//按钮名称
                isShow:false,//默认不显示删除
                dialogMenuTreeVisible:false,//弹出层，默认不显示
            }
        },
        created:function () { //初始化方法 类似于jquery  $({})
            //让_this等于当前vue对象
            var _this = this;
            //初始化查询左侧树
            axios.get('/menu/listTreeNodeData')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //直接使用this 会指 axios对象  错误
                    // this.tableData
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.data = response.data.data;
                    }
                })
        },
        methods: { //定义所有元素绑定的方法
            //绑定点击事件
            handleNodeClick(data) {
                console.log(JSON.stringify(data));
                //把当前节点json数据赋值给form
                this.form=data;
                this.btnName ="修改";
                this.isShow=true;
            },
            //更新或者添加提交
            onSubmit() {
                var  url = '/menu/insert';
                if(this.btnName=='修改'){
                    url='/menu/update';
                }
                // alert(JSON.stringify(this.form));
                var _this = this;
                axios.post(url,this.form)  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if(response.data.code==200){
                            //提示添加成功
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            //刷新整个页面
                            location.reload();
                        }else {
                            //错误提示信息
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
            },
            //删除
            onDel(){
                //判断是否是叶子
                if(this.form.url==''||this.form.url==null){
                    this.$message.error('该节点下还有子节点，不能删除！！！');
                    return;
                }
                //确认框提示
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                    // alert(111);
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.delete("/menu/delete?menuId="+this.form.id)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            //判断返回值是否正确
                            if(response.data.code==200){
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //删除整个页面
                                location.reload();
                            }else {
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            refresh(){
                location.reload();
            },
            //校验选中节点数量
            checkSelectNode(){
                let nodes = this.$refs.parentMenuTree.getCheckedNodes();
                if(nodes.length>1){
                    this.$message.error("只能选择一个节点。。。");
                    return;
                }
                console.log("一个节点："+JSON.stringify(nodes)+"名称为："+nodes[0].label);
                this.form.parentName=nodes[0].label;
                this.form.parentId=nodes[0].id;
                //关闭弹框
                this.dialogMenuTreeVisible=false;
                console.log("选中节点："+JSON.stringify(this.form));
            }
        }
    })
</script>
</html>